<template>
    <a-card :bordered="false">
        <div class="table-operator">

            <a-button type="primary" icon="plus" @click="handleAdd()">新增</a-button>
            <!-- <a-button v-if="hasPerm('rdrecord32.Add')" type="primary" icon="plus" @click="handleAdd()">新建</a-button> -->
            <a-button v-if="hasPerm('rdrecord32.Delete')" type="primary" icon="minus" @click="handleDelete(selectedRowKeys)"
                :disabled="!hasSelected()" :loading="loading">删除</a-button>
            <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
        </div>

        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="10">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="查询类别">
                            <a-select allowClear v-model="queryParam.Condition">
                                <a-select-option key="cCusName">业务员名称</a-select-option>
                                <a-select-option key="cCusCode">业务员编号</a-select-option>
                                <a-select-option key="cCusPhone">业务员手机号</a-select-option>
                                <!-- <a-select-option key="cRdCode">收发类别编码</a-select-option>
                <a-select-option key="cPersonCode">业务员编码</a-select-option>
                <a-select-option key="cPTCode">采购类型编码</a-select-option>
                <a-select-option key="cSTCode">销售类型编码</a-select-option> -->
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item>
                            <a-input v-model="queryParam.Keyword" placeholder="关键字" @keydown.enter="getDataList" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-button type="primary" @click="() => {
                            this.pagination.current = 1
                            this.getDataList()
                        }">查询</a-button>
                        <a-button style="margin-left: 8px" @click="repossess">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table ref="table" :scroll="{ y: 530 }" :columns="columns" :rowKey="(row, index) => row.ID" :dataSource="data"
            :pagination="pagination" :loading="loading" @change="handleTableChange" :bordered="true" size="small">
            <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
            <span slot="action" slot-scope="text, record">
                <template>
                    <a @click="handleEdit(record.Id)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record.Id)">删除</a>
                    <!-- <a v-if="hasPerm('rdrecord32.Delete')" @click="handleDelete([record.Id])">删除</a> -->
                </template>
            </span>
        </a-table>
        <!-- 添加业务员 -->
        <a-drawer placement="right"  :closable="false" :visible="visible" width="30%" @close="() => {
            this.visible = false;
            this.entity = {};
            this.Id = null;
        }">
            <span slot="title">{{ title }}</span>
            <a-form-model ref="ruleForm" style="margin-bottom: 20px;" :model="entity" :rules="rules" v-bind="layout">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="业务员编号" prop="cCusCode">
                            <a-input :disabled="disabled" v-model="entity.cCusCode" autocomplete="off"
                                placeholder="业务员编号" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                    <a-row>
                         <a-col :span="24">
                            <a-form-model-item label="业务员名称" prop="cCusName">
                                <a-input :disabled="disabled" v-model="entity.cCusName" autocomplete="off"
                                    placeholder="业务员名称" />
                            </a-form-model-item>
                        </a-col>
                </a-row>
                    <a-row>
                         <a-col :span="24">
                            <a-form-model-item label="联系方式" prop="cCusPhone">
                                <a-input :disabled="disabled" v-model="entity.cCusPhone" autocomplete="off"
                                    placeholder="联系方式" />
                            </a-form-model-item>
                        </a-col>
                        </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item label="开户银行" prop="cCusBank">
                                <a-input :disabled="disabled" v-model="entity.cCusBank" autocomplete="off"
                                    placeholder="开户银行" />
                            </a-form-model-item>
                        </a-col>
                        </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item label="银行账号" prop="cCusAccount">
                                <a-input :disabled="disabled" v-model="entity.cCusAccount" autocomplete="off"
                                    placeholder="银行账号" />
                            </a-form-model-item>
                        </a-col>
                        </a-row>
                    <a-row>
                         <a-col :span="24">
                            <a-form-model-item label="纳税人登记号" prop="cCusRegCode">
                                <a-input :disabled="disabled" v-model="entity.cCusRegCode" autocomplete="off"
                                    placeholder="纳税人登记号" />
                            </a-form-model-item>
                        </a-col>
                        </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="省/直辖市" prop="cProvince">
                            <a-select showSearch :filter-option="filterOption" v-model="entity.cProvince"
                                default-value="省/直辖市" style="width:100%" @change="city($event)">
                                <a-select-option v-for="(item, dei) in list" :key="item.Id" :value="item.Id">
                                    {{ item.Name }}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="市" prop="cCity">
                            <a-select showSearch :filter-option="filterOption" v-model="entity.cCity" default-value="市"
                                style="width:100%" @change="village($event)">
                                <a-select-option v-for="(item, dei) in listChildren" :key="item.Id" :value="item.Id">
                                    {{ item.Name }}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="区县" prop="cCounty">
                            <a-select showSearch :filter-option="filterOption" v-model="entity.cCounty" default-value="选择县级"
                                style="width:100%">
                                <a-select-option v-for="(item, dei) in county" :key="item.Id" :value="item.Id">
                                    {{ item.Name }}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="地址" prop="District">
                            <a-textarea :disabled="disabled" v-model="entity.District" autocomplete="off" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="Email地址" prop="cCusEmail">
                            <a-input :disabled="disabled" v-model="entity.cCusEmail" autocomplete="off"
                                placeholder="Email地址" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="法人" prop="cCusLPerson">
                            <a-input :disabled="disabled" v-model="entity.cCusLPerson" autocomplete="off" placeholder="法人" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="手机" prop="cCusHand">
                            <a-input :disabled="disabled" v-model="entity.cCusHand" autocomplete="off" placeholder="手机" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="传真" prop="cCusFax">
                            <a-input :disabled="disabled" v-model="entity.cCusFax" autocomplete="off" placeholder="传真" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <div :style="{
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
                zIndex: 1,
            }">
                <a-button :style="{ marginRight: '8px' }" @click="handleCancel">取消</a-button>
                <a-button type="primary" @click="handleOk()">保存</a-button>
            </div>
        </a-drawer>
    </a-card>
</template>

<script>
import moment from 'moment'
const columns = [
    { title: '业务员编号', dataIndex: 'cCusCode',width:'20%' },
    { title: '业务员名称', dataIndex: 'cCusName', width: '10%' },
    { title: '地址', dataIndex: 'District' },
    { title: '联系方式', dataIndex: 'cCusPhone',width:'20%' },
    { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' }, width: '100px', fixed: 'right' }
]

export default {
    components: {
    },
    mounted() {
        this.getDataList()
    },
    data() {
        return {
            data: [],
            rules:{
                cCusName: [
                    { required: true, message: '请输入业务员名称', trigger: 'blur' },
                ],
                cCusCode: [
                    { required: true, message: '请输入业务员编码', trigger: 'blur' },
                ],
            },
            pagination: {
                current: 1,
                pageSize: 25,
                showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
                pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
                showSizeChanger: true
            },
            filters: {},
            sorter: { field: 'dDate', order: 'desc' },
            loading: false,
            title:'',
            columns,
            layout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 },
            },
            entity: {},
            visible: false,
            queryParam: { Condition: 'cCusName' },
            selectedRowKeys: [],
            list: [], // 省级
            listChildren: [], // 市
            county: [], // 县
            Id:null,//编辑
        }
    },
    mounted(){
        this.getlist();
        this.getDataList();
    },
    methods: {
        repossess() {
            this.queryParam = { Condition: 'cCusName' }

        },
        handleTableChange(pagination, filters, sorter) {
            this.pagination = { ...pagination }
            this.filters = { ...filters }

            this.getDataList()
        },
        getDataList() {
            this.selectedRowKeys = []
            this.loading = true
            this.$http
                .post('/CustomerManagement/CustomerSalesman/GetDataList', {
                    PageIndex: this.pagination.current,
                    PageRows: this.pagination.pageSize,
                    SortField: 'id',
                    SortType: 'desc',
                    // DeptId: this.DeptId,
                    Search: this.queryParam,
                    // ...this.filters
                })
                .then(resJson => {
                    this.loading = false
                    this.data = resJson.Data
                    if (this.data) {
                        const pagination = { ...this.pagination }
                        pagination.total = resJson.Total
                        this.pagination = pagination
                    }
                }).catch(err => {
                    this.$message.error(err)
                })
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        hasSelected() {
            return this.selectedRowKeys.length > 0
        },
        handleAdd() {
            this.title = '新增业务员';
            this.visible = true;
        },
        handleEdit(id) {
            this.title = '编辑业务员';
            this.visible = true;
            this.Id = id;
            this.$http.post('/CustomerManagement/CustomerSalesman/GetTheData',{id}).then(res=>{
                this.entity = res.Data;
                this.city(this.entity.cProvince)
                this.village(this.entity.cCity)
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        handleCancel(){
            this.visible = false;
            this.entity = {};
            this.Id = null;
        },
        handleOk(){
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                        this.$http.post('/CustomerManagement/CustomerSalesman/SaveData', {...this.entity,Id:this.Id? this.Id:null}).then((resJson) => {
                            if (resJson.Success) {
                                this.$message.success('保存成功')
                                this.visible = false;
                                this.entity = {};
                                this.Id = null;
                                this.getDataList();
                            } else {
                                this.$message.error(resJson.Msg)
                            }
                        }).catch(err => {
                        this.$message.error(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            
        },
        handleDelete(ids) {
            var thisObj = this;
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                thisObj.$http
                  .post('/CustomerManagement/CustomerSalesman/DeleteData', [ids])
                  .then(resJson => {
                    if (resJson.Success) {
                      thisObj.$message.success('操作成功!')
                      thisObj.getDataList()
                    } else {
                      thisObj.$message.error(resJson.Msg)
                    }
                  })
            }).catch(err => {
                this.$message.error(err)
            })
        },
        timeFormat(val) {
            // 时间格式化函数
            return moment(val).format('YYYY-MM-DD HH:mm')
        },
        // 获取省份信息
        getlist(e) {
            this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then((resJson) => {
                this.loading = false
                this.list = resJson.Data
            }).catch(err => {
                this.$message.error(err)
            })
        },
        // 市级change
        city(e) {
            this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then((resJson) => {
                this.loading = false
                this.listChildren = resJson.Data
            }).catch(err => {
                this.$message.error(err)
            })
        },
        // 县change
        village(e) {
            this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then((resJson) => {
                this.loading = false
                this.county = resJson.Data
            }).catch(err => {
                this.$message.error(err)
            })
        },
    }
}
</script>
<style scoped>
/deep/ .ant-drawer-body{
    margin-top: 50px;
}
/deep/ .ant-drawer-header{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}
</style>